import React from "react";
import { connect } from "dva";
import {
  message,
  Input,
  Form,
  Modal,
  Table,
  Button,
  Icon,
  Popconfirm,
} from "antd";
import "./SensitiveWord.less";
import { sensitiveWords, addSensitiveWords, delSensitiveWords } from "../../../services/fetch";

const { Search, TextArea } = Input
class SensitiveWord extends React.Component {
  state = {
    queryParams: {
      page: 1,
      per_page: 20,
      words: ''
    },
    dataList: {},
    checkedWordsId: '',
    showModal: false,
    addWords:'',
  }

  componentDidMount() {
    this.init()
  }

  init = async () => {
    const { queryParams } = this.state
    const { data: { code, data } } = await sensitiveWords(queryParams)
    if (code === 200) {
      this.setState({ dataList: data })
    }
  }

  onSearch = (value) => {
    const { queryParams } = this.state
    this.setState(
      { queryParams: { ...queryParams, words: value } },
      () => this.init()
    )
  }

  onChangePage = (page, pageSize) => {
    const { queryParams } = this.state
    this.setState(
      { queryParams: { ...queryParams, page } },
      () => this.init()
    )
  }

  delWords = async (id) => {
    if(!id) return message.info('未选择任何删除项')
    const { data: { code, msg } } = await delSensitiveWords({ ids: id })
    if (code === 200) {
      message.success(msg)
      this.init()
    } else {
      message.error(msg)
    }
  }

  checkedRow = (checkedWordsId) => {
    checkedWordsId = checkedWordsId.join(',')
    this.setState({ checkedWordsId })
  }

  addWords = async () => {
    const {addWords} = this.state
    if(!addWords) return message.info('敏感词不能为空')
    const {data:{code,msg}} = await addSensitiveWords({words:addWords})
    if(code === 200) {
      message.success(msg)
      this.init()
      this.setState({ showModal: false, addWords:'' })
    } else {
      message.error(msg)
    }
  }



  render() {
    const {
      dataList: { data: dataSource, total, per_page, current_page, last_page },
      checkedWordsId,
      showModal,
      addWords,
    } = this.state

    const columns = [
      {
        title: 'ID',
        dataIndex: 'id',
        key: 'id',
      },
      {
        title: '敏感词',
        dataIndex: 'words',
        key: 'words',
      },
      {
        title: '操作',
        key: 'action',
        render: (text, record) => (
          <span>
            <Popconfirm
              title="确定删除该词库吗？"
              onConfirm={() => this.delWords(record.id)}
              okText="确定"
              cancelText="取消"
            >
              <Button type="link">删除</Button>
            </Popconfirm>
          </span>
        ),
      },
    ];

    return (
      <section className='SensitiveWord'>
        <header>敏感词管理</header>
        <div className="content">
          <div className="total-box">
            <span>敏感词列表（共{total}条）</span>
            <Button type="primary" onClick={() => this.setState({ showModal: true })}>
              <Icon type="plus" />
            新建敏感词
            </Button>
          </div>
          <div className="search-box">
            <Search
              style={{ width: 200 }}
              placeholder="输入敏感词"
              onSearch={value => this.onSearch(value)}
              enterButton
            />
            <Popconfirm
              title="确定删除所有选中词库吗？"
              onConfirm={() => this.delWords(checkedWordsId)}
              okText="确定"
              cancelText="取消"
            >
              <Button type="primary">
                <Icon type="delete" />
            批量删除
            </Button>
            </Popconfirm>
          </div>
          <Table
            size="small"
            dataSource={dataSource}
            columns={columns}
            rowSelection={{
              onChange: this.checkedRow
            }}
            rowKey={record => record.id}
            pagination={{
              total,
              current: current_page - 0,
              pageSize: per_page - 0,
              onChange: this.onChangePage
            }}
          />;
        </div>
        <Modal
          title="新增"
          visible={showModal}
          onOk={this.addWords}
          onCancel={() => this.setState({ showModal: false, addWords:'' })}
          destroyOnClose={true}
        >
          <p>敏感词：</p>
          <TextArea
           placeholder=' 敏感词1，敏感词2，敏感词3（多个词之间中文逗号“，”隔开）'
            style={{minHeight:200}}
            value={addWords}
            onChange={(e) => this.setState({addWords:e.target.value})}
             ></TextArea>
        </Modal>
      </section>
    );
  }
}

export default SensitiveWord;
